<template>
  <div class="tip_warp">
    <div class="tip">
      <div class="img_warp">
        <img :src="imgsrc" :style="imgstyle">
      </div>
      <div class="text">
        <p class="title">{{title}}</p>
        <p class="content">{{content}}</p>
      </div>
      <div class="returnbar">
        <div class="button_warp">
          <div class="selectno" @click="selectno()">取消</div>
          <div class="selectyes" @click="selectyes()">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tip_yesorno',
  props: ['imgsrc', 'imgwidth', 'imgheight', 'designWidth', 'title', 'content'],
  data () {
    return {
      imgstyle: {
        width: this.px2rem(this.imgwidth),
        height: this.px2rem(this.imgheight)
      }
    }
  },
  methods: {
    px2rem ($px) {
      return $px * 320 / this.$global.designWidth / 20 + 'rem'
    },
    selectyes () {
      this.$emit('closetip_ensure')
    },
    selectno () {
      this.$emit('closetip_cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip_warp {
    background-color: rgba(38, 38, 38, 0.45);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    color: #FFF;
    .tip{
      position: absolute;
      top: 45%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 75%;
      max-height: 80%;
      overflow: auto;
      margin: 0 auto;
      border-radius: px2rem(31);
      background-color: #FFF;
      .img_warp{
        width: 100%;
        /*border: px2rem(2) solid red;*/
        margin: px2rem(30) 0;
        text-align: center;
        img{
          /*border: px2rem(2) solid red;*/
        }
      }
      .text{
        width: 90%;
        /*background-color: #6CF;*/
        text-align: center;
        color: $text-color;
        margin: 0 auto px2rem(46);
        .title {
          /*border: 2px solid red;*/
          width: 75%;
          font-size: px2rem(24);
          font-weight: bold;
          line-height: px2rem(30);
          margin: 0 auto;
        }
        .content {
          /*border: 2px solid red;*/
          font-size: $text-size-normal;
          line-height:$text-size-normal;
          line-height: px2rem(20);
        }
      }
      .returnbar {
        width: 100%;
        height: px2rem(70);
        background-color: #F1F1F1;
        border-top: px2rem(1) solid transparent;
        .button_warp{
          width: 80%;
          height: px2rem(44);
          margin: px2rem(13) auto;
          /*border: px2rem(2) solid red;*/
          @mixin button{
            border-radius: px2rem(22);
            width: px2rem(80);
            height: px2rem(44);
            line-height: px2rem(40);
            text-align: center;
            font-size: $text-size-imp;
            color: #FFF;
          }
          .selectno {
            @include button;
            float: left;
            background-color: #F84545;
          }
          .selectyes {
            @include button;
            float: right;
            background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* 标准的语法 */
          }
        }

      }
    }

  }
</style>
